<template>
  <div class="login-form">
    <div v-if="!isLoggedIn && !isResetting" class="login-form__inner">
      <h2 class="login-title">用户登录</h2>
      <input v-model="username" placeholder="请输入用户名" class="login-input"/>
      <input v-model="password" type="password" placeholder="请输入密码" class="login-input"/>
      <button @click="login" class="login-btn">登录</button>
    </div>
    <div v-if="isLoggedIn && !isResetting" class="button-container">
      <button class="button" @click="goToUrl('/downloadUser')">下载用户信息表</button>
      <button class="button" @click="goToUrl('/downloadAdvice')">下载意见信息表</button>
      <button class="button" @click="goToUrl('/downloadWeight')">下载分析数据表</button>
      <button class="button" @click="isResetting = true">重置密码</button>
    </div>
    <div v-if="isResetting" class="login-form__inner">
      <h2 class="login-title">重置密码</h2>
      <input v-model="oldPassword" placeholder="请输入旧密码" class="login-input"/>
      <input v-model="newPassword" type="password" placeholder="请输入新密码" class="login-input"/>
      <input v-model="confirmPassword" type="password" placeholder="请确认新密码" class="login-input"/>
      <div class="button-group">
        <button @click="resetPassword" class="login-btn">提交</button>
        <button @click="isResetting = false" class="login-btn">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import axios from 'axios';

const base_url = 'http://localhost:8080'
// const base_url = 'https://www.iehealth.cn'

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
      isLoggedIn: false,
      isResetting: false,
    };
  },
  methods: {
    async login() {
      const md5Pwd = md5(this.password);
      const res = await axios.post(base_url + '/loginManager', {
        username: this.username,
        password: md5Pwd,
      });
      if (res.data.success == true && res.data.data.token) {
        // 登录成功，保存 token 并显示三个按钮
        localStorage.setItem('token', res.data.data.token);
        this.isLoggedIn = true;
      } else {
        // 登录失败，提示错误信息
        alert('用户名和密码错误');
      }
    },
    async resetPassword() {
      if (this.newPassword !== this.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }
      const md5old = md5(this.oldPassword);
      const md5Pwd = md5(this.newPassword);
      const res = await axios.post(base_url + '/resetPassword', {
        token: localStorage.getItem('token'),
        oldPassword: md5old,
        newPassword: md5Pwd,
      });
      if (res.data.success === true) {
        // 重置密码成功，显示下载按钮并隐藏重置密码部分
        this.isResetting = false;
      } else {
        alert('重置密码失败');
      }
    },
    goToUrl(url) {
      window.location.href = base_url + url + '?token=' + localStorage.getItem('token');
    },
  },
};
</script>

<style scoped>
.login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f2f2;
}

.login-form__inner {
  background-color: white;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  animation: fadeIn 0.5s ease-in-out;
}

.login-title {
  margin-top: 0;
  margin-bottom: 20px;
}

.login-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.login-btn {
  display: block;
  width: 100%;
  height: 40px;
  padding: 10px;
  margin-top: 20px;
  font-size: 16px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.login-btn:hover {
  background-color: #1976d2;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.button {
  display: block;
  width: 200px;
  height: 40px;
  padding: 10px;
  margin: 10px;
  font-size: 16px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.button:hover {
  background-color: #1976d2;
}

.button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.button-group button {
  margin: 0 10px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
